﻿import QtQuick 2.12
import QtGraphicalEffects 1.0
Item {


    id: root

    property string title: ""

    // 按钮样式
    property string button_icon: ""
    property string button_icons: ""
    property string button_color: "white"
    property string text_color: "#333333"
    property string text_size: config.fontsize
    property string button_border: "transparent"
    property string icon_color: ""
    property var icon_width: idImage.parent.width
    property var icon_height: idImage.parent.height

    // 选中时样式
    property string button_icon_select: button_icon
    property string button_icons_select: button_icons
    property string button_color_select: button_color
    property string text_color_select: text_color
    property string button_border_select: button_border
    property string icon_color_select: icon_color

    // Hover时样式
    property string button_icon_hover: button_icon
    property string button_icons_hover: button_icons
    property string button_color_hover: button_color
    property string text_color_hover: text_color
    property string button_border_hover: button_border
    property string icon_color_hover: icon_color

    // 点击时样式
    property string button_icon_press: button_icon
    property string button_icons_press: button_icons
    property string button_color_press: button_color
    property string text_color_press: text_color
    property string button_border_press: button_border
    property string icon_color_press: icon_color

    // 禁用时样式
    property string button_icon_disable: button_icon
    property string button_icons_disable: button_icons
    property string button_color_disable: "#F5F5F5"
    property string text_color_disable: "#BFBFBF"
    property string button_border_disable: "#CCCCCC"
    property string icon_color_disable: "#CCCCCC"


    property real radius: 3*dp

    property bool isSelected: false
    property bool isDisabled: false
    property bool isPressed: false
    property bool isHover: false

    // 预设方案
    property bool underlineSelect: false    // 下面带蓝杠的可选中按钮
    property bool defaultMode1: false       // 蓝色按钮（在onCompleted中设置）
    property bool defaultMode2: false       // 白色按钮（在onCompleted中设置）

    // 选中样式
    function setSelect(){
        isSelected = true
    }
    function setUnselect(){
        isSelected = false
    }


    // 预设方案设置
    Component.onCompleted: {
        if(defaultMode1){       // 蓝色按钮
            button_color = "#1677FF"
            text_color   = "white"
            button_border = "transparent"
            button_color_press = "#1162F3"

        }else if(defaultMode2){     // 白色按钮
            button_color = "white"
            text_color   = "#333333"
            button_border = "#CCCCCC"
            button_color_press = "#F7FAFE"
        }
    }


    width: 150*dp
    height: 40*dp

    signal released(var mouseX, var mouseY)
    signal pressed(var mouseX, var mouseY)
    signal positionChanged(var mouseX,var mouseY)
    signal released_disabled()

    // 按钮背景
    Rectangle{
        id: idRectangle
        anchors.fill: parent
        color: {
            if(isDisabled){
                return button_color_disable
            }else if(isSelected){
                return button_color_select
            }else if(isPressed){
                return button_color_press
            }else if(isHover){
                return button_color_hover
            }else if(!enabled){
                return button_color_disable
            }else{
                return button_color
            }
        }
        border.color: {
            if(isDisabled){
                return button_border_disable
            }else if(isSelected){
                return button_border_select
            }else if(isPressed){
                return button_border_press
            }else if(isHover){
                return button_border_hover
            }else{
                return button_border
            }
        }
        radius: underlineSelect ? 0 : root.radius
    }
    // 按钮图标
    Image {
        id: idImage
        height: icon_height
        width: icon_width
        x: 10*dp
        y: (parent.height-icon_height)/2
        source: {
            if(isDisabled){
                return button_icon_disable
            }else if(isSelected){
                return button_icon_select
            }else if(isPressed){
                return button_icon_press
            }else if(isHover){
                return button_icon_hover
            }else{
                return button_icon
            }
        }
        mipmap: true
        ColorOverlay{
            visible: icon_color!==""
            anchors.fill: parent
            source: parent
            color: {
                if(isDisabled){
                    return icon_color_disable
                }else if(isSelected){
                    return icon_color_select
                }else if(isPressed){
                    return icon_color_press
                }else if(isHover){
                    return icon_color_hover
                }else{
                    return icon_color
                }
            }
        }
    }
    // 按钮图标2
    Image {
        id: idImage2
        height: icon_height
        width: icon_width
        x: parent.width-30*dp
        y: (parent.height-icon_height)/2
        source: {
            if(isDisabled){
                return button_icons_disable
            }else if(isSelected){
                return button_icons_select
            }else if(isPressed){
                return button_icons_press
            }else if(isHover){
                return button_icons_hover
            }else{
                return button_icons
            }
        }
        mipmap: true
        ColorOverlay{
            visible: icon_color!==""
            anchors.fill: parent
            source: parent
            color: {
                if(isDisabled){
                    return icon_color_disable
                }else if(isSelected){
                    return icon_color_select
                }else if(isPressed){
                    return icon_color_press
                }else if(isHover){
                    return icon_color_hover
                }else{
                    return icon_color
                }
            }
        }
    }
    // 按钮文字
    Text{
        id: idText
        font.pixelSize: text_size-1.2
        x:idImage.width+15*dp
        y:(parent.height-idText.height)/2
        text: title
        color: {
            if(isDisabled){
                return text_color_disable
            }else if(isSelected){
                return text_color_select
            }else if(isPressed){
                return text_color_press
            }else if(isHover){
                return text_color_hover
            }else{
                return text_color
            }
        }
    }

    MouseArea{
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        acceptedButtons: Qt.LeftButton | Qt.RightButton
        hoverEnabled: true
        onEntered: {
            isHover = true
        }onExited: {
            isHover = false
        }onPositionChanged: {
            root.positionChanged(mouseX,mouseY)
        }

        onPressed: {
            isPressed = true
            root.pressed(mouseX,mouseY)
        }
        onReleased: {
            isPressed = false
            if (!isDisabled){
                root.released(mouseX,mouseY)
            }else{
                root.released_disabled()
            }
            root.focus = true
            if(mouse.button === Qt.RightButton){
                // 显示自定义菜单的逻辑
                menu.visible = true
                menu.x = mouseX
                menu.y = mouseY + parent.height // 将菜单放在按钮下方
            }
        }
    }



    CustomBorder{
        id: underline
        bBorderwidth: 2*dp
        borderColor: "#1677FF"
        visible: underlineSelect && isSelected
    }

}
